<template>
    <div class="resource-form-dialog">
        <el-dialog v-model="resourceDialogVisible"
                   :title="opt === 'EDIT' ? '修改' : '添加'"
                   :close-on-click-modal="false"
                   :close-on-press-escape="false"
                   @close="$emit('update:show', false)"
                   destroy-on-close
                   top="8vh">
            <el-form :model="resourceForm"
                     :rules="resourceFormRules"
                     ref="resourceForm"
                     label-position="right"
                     label-width="100px">
                <input :name="resourceForm.id" type="hidden"/>
                <el-form-item label="名称" prop="name">
                    <el-input v-model="resourceForm.name" placeholder="请输入资源名称"/>
                </el-form-item>
                <el-form-item v-if="opt === 'ADD'" label="所属类型" prop="type">
                    <el-select v-model="resourceForm.type" @change="handleTypeChange" placeholder="请选择资源类型">
                        <el-option v-for="it in typeData"
                                   :key="it.value"
                                   :value="it.value"
                                   :label="it.label" :disabled="it.disabled">
                        </el-option>
                    </el-select>
                </el-form-item>

                <div v-if="resourceForm.type === 0 || resourceForm.type === 1">
                    <el-form-item label="资源路径" prop="path">
                        <el-input v-model="resourceForm.path" autocomplete="off" placeholder="请输入资源路径"/>
                    </el-form-item>
                    <el-form-item label="上一级菜单" prop="parentId">
                        <el-cascader v-model="resourceForm.parentId"
                                     :props="parentMenuProps"
                                     :options="parentMenuData"
                                     placeholder="请选择上一级菜单" />
                    </el-form-item>
                    <el-form-item label="icon类名">
                        <el-input v-model="resourceForm.iconClass" placeholder="请输入icon类名"/>
                    </el-form-item>
                    <el-form-item label="自定义序号">
                        <el-input v-model="resourceForm.sortNo" placeholder="请输入自定义序号"/>
                    </el-form-item>
                </div>

                <div v-if="resourceForm.type === 2">
                    <el-form-item label="请求url" prop="path">
                        <el-input v-model="resourceForm.path" autocomplete="off" placeholder="请输入请求url"/>
                    </el-form-item>
                    <el-form-item label="请求方法" prop="reqMethod">
                        <el-select v-model="resourceForm.reqMethod" placeholder="请选择请求方法">
                            <el-option v-for="it in reqMethodData"
                                       :key="it.value"
                                       :value="it.value"
                                       :label="it.label" :disabled="it.disabled">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="所属菜单项" prop="parentId">
                        <el-select v-model="resourceForm.parentId" placeholder="请选择所属菜单项">
                            <el-option v-for="it in parentMenuData" :key="it.id" :value="it.id" :label="it.name"/>
                        </el-select>
                    </el-form-item>
                </div>

            </el-form>
            <template #footer>
                <span>
                    <el-button type="primary" plain @click="submitResourceForm('resourceForm')">提 交</el-button>
                    <el-button type="info" plain @click="resourceDialogVisible = false">关 闭</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script>
import resourceReq from "@/services/resource/request";

export default {
    name: "ResourceForm",
    props: {
        show: {
            type: Boolean,
            default: false,
        },
        opt: {
            type: String,
        },
        datas: {
            type: Object,
        },
    },
    watch: {
        show() {
            if (this.show) {
                this.resourceForm = this.datas
                this.resourceDialogVisible = this.show
                this.loadSelectByType(this.datas.type)
            }
        },
    },
    data() {
        return {
            resourceDialogVisible: false,
            typeData: [
                {value: 0, label: '菜单项'},
                {value: 1, label: '菜单'},
                {value: 2, label: '权限项'},
                {value: 3, label: '未定义', disabled: true},
            ],
            reqMethodData: [
                {value: 'GET', label: 'GET'},
                {value: 'POST', label: 'POST'},
                {value: 'PUT', label: 'PUT'},
                {value: 'DELETE', label: 'DELETE'},
                {value: 'HEAD', label: 'HEAD'},
                {value: 'PATCH', label: 'PATCH'},
            ],
            // typeSelected: '',

            resourceForm: {},
            resourceFormRules: {
                name: [{required: true, message: "请输入资源名称", trigger: "blur"}],
                path: [{required: true, message: "请输入资源路径", trigger: "blur"}],
                parentId: [{required: true, message: "请选择上级菜单", trigger: "blur"}],
                type: [{required: true, message: "请选择资源类型", trigger: "blur"}],
                reqMethod: [{required: true, message: "请选择请求方法", trigger: "blur"}],
                reqUrl: [{required: true, message: "请输入请求URL", trigger: "blur"}],
            },

            parentMenuData: [],
            parentMenuProps: {
                value: "id",
                label: "name",
                expandTrigger: "hover",
                children: "children",
                emitPath: false,
            },
        };
    },
    methods: {
        handleTypeChange(val) {
            this.resourceForm.parentId = 0
            if (val < 2) {
                this.resourceForm.reqUrl = null
                this.resourceForm.reqMethod = null
            } else if (val === 2) {
                this.resourceForm.iconClass = null
                this.resourceForm.sortNo = null
                this.resourceForm.path = null
            }
            this.loadSelectByType(val)
        },
        loadSelectByType(type) {
            if (type < 2) {
                this.loadParentMenu()
            } else if (type === 2) {
                this.loadMenuItem()
            }
        },
        async loadParentMenu() {
            let r = await resourceReq.listMenu()
            if (r.code === 0) {
                this.parentMenuData = r.data;
                this.parentMenuData.push({id: 0, name: '顶级菜单'});
            } else {
                this.$message.error('上级菜单列表加载失败， 请刷新！');
            }
        },
        async loadMenuItem() {
            let r = await resourceReq.listMenuItem()
            if (r.code === 0) {
                this.parentMenuData = r.data;
                // this.parentMenuData.push({id: 0, name: '顶级菜单'});
            } else {
                this.$message.error('上级菜单列表加载失败， 请刷新！');
            }
        },
        submitResourceForm(formName) {
            this.$refs[formName].validate(async (valid) => {
                if (valid) {
                    // 提交后台
                    let r = await resourceReq.save(this.resourceForm)
                    if (r.code === 0) {
                        this.$message.success("操作成功")
                        this.resourceDialogVisible = false
                        // 让父组件刷新列表
                        this.$emit("finishMethod")
                    } else {
                        this.$message.error(r.msg)
                    }
                } else {
                    return false;
                }
            })
        },
    },
};
</script>

<style scoped>

</style>